<form class="layui-form " action="" lay-filter="dataForm">
    <input type="hidden" name="id" value="{$info.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">商品id</label>
        <div class="layui-input-block">
            <label class="layui-form-label">
                {$info.id} 
            </label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <label class="layui-form-label" style="text-align: left;padding-left: 0; width:600px;">
                {$info.name} <span style="color: #bbb;margin-left: 40px;">(*品牌+型号+分类)</span>
            </label>
        </div>
    </div>
    {if condition="($Think.session.admin_info.permission==10)"/}
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="text" name="order" lay-verify="required" autocomplete="off" placeholder="请输入正数" class="layui-input"
            value="{$info.order}"> <span style="color: #bbb;margin-left: 40px;">(*越小越靠前)</span>
        </div>
    </div>
    {/if}
    <div class="layui-form-item">
        <label class="layui-form-label">品牌</label>
        <div class="layui-input-inline">
            <select name="brand" lay-verify="required">
                <option value=""></option>
                {volist name="brand_list" id="vo"}
                <option value="{$vo.id}" {$vo.id==$info.brand?'selected':''}>{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">型号</label>
        <div class="layui-input-inline">
            <input type="text" name="model" lay-verify="required" autocomplete="off" placeholder="请输入型号" class="layui-input"
                value="{$info.model}">
        </div>
    </div>
    <!-- <div class="layui-form-item">
        <label class="layui-form-label">版本</label>
        <div class="layui-input-inline">
            <select name="version">
                <option value="CH">CH</option>
                <option value="TW">TW</option>
                <option value="SP">SP</option>
            </select>
        </div>
    </div> -->
    <!-- <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <label class="layui-form-label" style="text-align: left;padding-left: 0;">
            {$info.classify==0?'官方产品':'自有产品'}
        </label>
    </div> -->
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline">
            <select name="type" lay-verify="required">
                <option value=""></option>
                {volist name="type_list" id="vo"}
                <option value="{$vo.id}" {$vo.id==$info.type?'selected':''}>{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图</label>
        <div class="layui-input-block">
            <div class="imgs pics-imgs">
                {volist name="info.pics" id="vo"}
                <div class="pic-div"><img src="{$vo ?: ''}" class="minPic"><i class="layui-icon layui-table-tips-c layui-icon-close"></i></div>
                {/volist}
            </div>
            <button type="button" class="layui-btn upload pics">
                <i class="layui-icon">&#xe67c;</i>上传轮播图
            </button>
        </div>
    </div>
    <!-- <div class="layui-form-item">
        <label class="layui-form-label">规格</label>
        <div class="layui-input-block">
            <div id="specificationsDiv"></div>
        </div>
    </div> -->
    <!-- <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block">
            <input type="text" name="tag" placeholder="请输入商品标签" class="layui-input" value="{$info.tag}">
        </div>
    </div> -->

    <div class="layui-form-item">
        <label class="layui-form-label">重量</label>
        <div class="layui-input-inline">
            <input type="text" name="weight" placeholder="请输入重量" class="layui-input" value="{$info.weight}">
        </div>
        <div class="layui-form-mid layui-word-aux">kg</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">宣传段子</label>
        <div class="layui-input-block">
            <textarea name="passage" placeholder="请输入宣传段子" class="layui-textarea">{$info.passage}</textarea>
        </div>
    </div> 

    <div class="layui-form-item">
        <label class="layui-form-label">图文详情</label>
        <div class="layui-input-block">
            <input type="hidden" name="info">
            <div class="imgs info-imgs" id="editableDiv" contenteditable="true">
                <img src="__STATIC__/images/iphonex.png" class="bg">
                <h3 class="demo-title">图文详情示例</h3>
                {volist name="info.info" id="vo"}
                <div class="pic-div"><img src="{$vo ?: ''}" class="minPic"><i class="layui-icon layui-table-tips-c layui-icon-close"></i></div>
                {/volist}
            </div>
            <button type="button" class="layui-btn upload">
                <i class="layui-icon">&#xe67c;</i>上传图文
            </button>
            <span style="color: #bbb;margin-left: 10px;">(*或者点击上面虚线框内，再ctrl+v即可粘贴图片)</span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="dataSubmit">保存</button>
        </div>
    </div>
</form>

<script id="tableTpl" type="text/html">
    <table class="layui-table">
        <thead>
            <tr>
                <th>名称</th>
                {if condition="($Think.session.admin_info.permission==6)"} 
                <th>供货价</th>
                {elseif condition="($Think.session.admin_info.permission==10)"/}
                <th>真实供货价</th>
                <th>帮主供货价</th>
                <th>零售价</th>
                <th>建议售价</th>
                {/if}
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            {{#  layui.each(d, function(index, item){ }}
            <tr>
                <td><input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="title" name="specifications[{{index}}][title]" value="{{ item.title || '' }}"/></td>
                {if condition="($Think.session.admin_info.permission==6)"} 
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="real_supply" name="specifications[{{index}}][real_supply]" value="{{ item.real_supply || '0' }}"/></td>
                {elseif condition="$Think.session.admin_info.permission==10"/}
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="real_supply" name="specifications[{{index}}][real_supply]" value="{{ item.real_supply || '0' }}"/></td>
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="supply_price" name="specifications[{{index}}][supply_price]" value="{{ item.supply_price || '0' }}"/></td>   
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="retail_price" name="specifications[{{index}}][retail_price]" value="{{ item.retail_price || '0' }}"/></td> 
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="suggest_price" name="specifications[{{index}}][suggest_price]" value="{{ item.suggest_price || '0' }}"/></td>
                {/if}
                
                <td><input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="stock" name="specifications[{{index}}][stock]" value="{{ item.stock || '0' }}"/><i class="layui-icon layui-table-tips-c layui-icon-close"></i></td>
            </tr>
            {{#  }); }}
            {{#  if(d.length === 0){ }}
            <tr><td colspan="6">无规格</td></tr>
            {{#  } }} 
        </tbody>
    </table>
    <button type="button" class="layui-btn addSpec">添加规格</button>
</script>
<style>
    .uploadImg {
        width: 200px;
    }

    .minPic {
        position: relative;
        width: 100px;
        max-height: 100px;
    }

    .pic-div {
        position: relative;
        display: inline-block;
        margin: 10px 5px;
    }

    .info-imgs {
        overflow-y: scroll;
        overflow-x: hidden;
        width: 432px;
        height: 727px; 
        padding:0 10px; 
        border: 3px #ccc dashed;
    }

    .info-imgs .pic-div {
        float: left;
        clear: both;
        margin: 0;
    }

    .info-imgs .pic-div .layui-table-tips-c {
        right: -55px;
        top: 50%;
    }

    .info-imgs .bg {
        position: absolute;
        z-index: 2;
        pointer-events: none;
        background: transparent;
        background: linear-gradient(135deg, #fff 40px, transparent 0) top left,
            linear-gradient(-135deg, #fff 40px, transparent 0) top right,
            linear-gradient(-45deg, #fff 40px, transparent 0) bottom right,
            linear-gradient(45deg, #fff 40px, transparent 0) bottom left;
        background-size: 51% 51%;
        background-repeat: no-repeat;
    }

    .info-imgs .minPic {
        width: 316px;
        max-height: initial;
        margin-left: 24px;
    }

    .demo-title {
        padding: 80px 0 50px;
        text-align: center;
        width: 354px;
        font-size: 20px;
        background: #e6e6e6;
        font-weight: bold;
    }

    .info-imgs .pic-div:last-child {
        margin-bottom: 21px;
    }
</style>
<script>
    layui.use(['form', 'http', 'laydate', 'upload', 'laytpl'], function () {
        var form = layui.form;
        var http = layui.http;
        var $ = layui.$;
        var laytpl = layui.laytpl;

        function handlePaste (e) {
            if ( !(e.clipboardData && e.clipboardData.items) ) 
                return ;        
            // 阻止粘贴
            e.stopPropagation();
            e.preventDefault();        

            for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
                var item = e.clipboardData.items[i]; 
                if (item.kind === "string") {
                    item.getAsString(function (str) {
                        var ps = getimgsrc(str)
                        for (let index = 0; index < ps.length; index++) {                            
                            $("#editableDiv").append('<div class="pic-div"><img src="' +
                                ps[index] +
                                '" class="minPic"><i class="layui-icon layui-table-tips-c layui-icon-close"></i></img></div>'
                            )
                            info.push(ps[index])
                        }
                    })
                } 
            }
        }

        function getimgsrc(htmlstr) { 
            var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim; 
            var arr = []; 
            while (tem = reg.exec(htmlstr)) { 
                arr.push(tem[2]); 
            } 
            return arr; 
        }
        
        document.getElementById('editableDiv').addEventListener('paste', handlePaste);





        var upload = layui.upload;
        var pics = <?php echo json_encode($info['pics']?$info['pics']:[]);?>;
        var info = <?php echo json_encode($info['info']?$info['info']:[]);?>;
        var ut = upload.render({
            elem: '.upload',
            url: '/product/uploadpic/',
            multiple: true,
            before: function (obj) {
                layer.load()
            },
            done: function (res, index, upload) {
                layer.closeAll('loading')
                if (res.code == 0) {
                    var item = this.item;
                    if ($(item[0]).hasClass('pic')) {
                        $(item[0]).parent().find(".uploadImg").attr('src', res.data)
                        $(item[0]).parent().find("input[name=pic]").val(res.data)
                    } else if ($(item[0]).hasClass('pics')) {
                        $(item[0]).parent().find(".imgs").append('<div class="pic-div"><img src="' +
                            res.data +
                            '" class="minPic"><i class="layui-icon layui-table-tips-c layui-icon-close"></i></img></div>'
                        )
                        pics.push(res.data)
                        console.log(pics)
                    } else {
                        $(item[0]).parent().find(".imgs").append('<div class="pic-div"><img src="' +
                            res.data +
                            '" class="minPic"><i class="layui-icon layui-table-tips-c layui-icon-close"></i></img></div>'
                        )
                        info.push(res.data)
                        console.log(info)
                    }

                } else {
                    layer.msg(res.message)
                }
            },
            error: function (index, upload) {
                layer.closeAll('loading')
                layer.msg('上传接口出错')
            }
        });
        // 这里bind body 会重复添加事件
        $(".layui-layer-admin").on('click', '.pics-imgs .layui-icon-close', function (e) {
            var index = $(".pics-imgs .layui-icon-close").index($(this))
            console.log(index)
            pics.splice(index, 1)
            console.log('副图删除后', pics)
            $(this).parent().remove()
        })

        $(".layui-layer-admin").on('click', '.info-imgs .layui-icon-close', function (e) {
            var index = $(".info-imgs .layui-icon-close").index($(this))
            info.splice(index, 1)
            console.log('图文删除后', info)
            $(this).parent().remove()
        })


        form.val('dataForm', {
            "id": "{$info.id}",
        })
        //监听提交
        form.on('submit(dataSubmit)', function (data) {
            var d = data.field
            d['pics'] = pics
            d['info'] = info
            http.post('/product/productedit', d, function (res) {
                if (res.code == 0) {
                    parent.layui.table.reload('dataTable');
                    parent.layer.closeAll('page');
                }
            }, $(this))
            return false;
        })
    })
</script>